<template>
  <div class="ipContainer">
    <div class="ipBox">
      <div class="ip">
        <input class="ipInput" v-model="ip[0]" type="text">
      </div>
      <div class="circle">
        <span>.</span>
      </div>
      <div class="ip">
        <input class="ipInput" v-model="ip[1]" type="text">
      </div>
      <div class="circle">
        <span>.</span>
      </div>
      <div class="ip">
        <input class="ipInput" v-model="ip[2]" type="text">
      </div>
      <div class="circle">
        <span>.</span>
      </div>
      <div class="ip">
        <input class="ipInput" v-model="ip[3]" type="text">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      ipList: {
        default: "",
      },
      inputType: {
        default: "",
      },
      initIndex:{
        default:"",
      },
    },
    data() {
      return {
        ip: [],
      }
    },
    created() {
      this.ip=[];
      let arr = this.ipList.split(".");
      for (let i = 0; i < arr.length; i++) {
        this.ip.push(arr[i]);
      }
    },
    watch:{
      ipList(){
        this.ip=[];
        let arr = this.ipList.split(".");
        for (let i = 0; i < arr.length; i++) {
          this.ip.push(arr[i]);
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        let that = this;
        $(".ipInput").on("keydown",function (event) {
          event=event || window.event;
          if(event.keyCode==110 || event.keyCode==190){
            if($(this).val().length<1){
              return;
            }
            $(this).parent().next().next().find("input").focus().select();
            return;
          }
        })
        $(".ipInput").on('input', function (event) {
          let arr= that.ip;
          for (let i = 0; i < arr.length; i++) {
            that.$set(arr, i, String(arr[i]).replace(/[^\d]/ig, ""));
            if (arr[i] > 255) {
              that.$set(arr, i, 255);
            }
            if (arr[i] < 0) {
              that.$set(arr, i, 0);
            }
          }
          if ($(this).val().length > 2) {
            $(this).parent().next().next().find("input").focus().select();
          }
          let data = {
            ip: that.ip.join("."),
            type: that.inputType,
          };
          if(that.initIndex!==""){
            data.index=that.initIndex;
          }
          that.$emit('getIp', data);
        });
      })
    },
    methods:{
    },
  }
</script>

<style scoped lang="less" type="text/less">
  .ipContainer {
    border: 1px solid #dcdfe6;
    .ip {
      float: left;
      width: 23%;
      height: 35px;
      line-height: 35px;
      position: relative;
      input {
        border: 0;
        outline: 0;
        width: 100%;
        height: 35px !important;
        text-align: center;
      }
      span {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .circle {
      float: left;
      width: auto;
      position: relative;
      width: 4px;
      height: 35px;
      span {
        position: absolute;
        right: 1px;
        bottom: 9px;
      }
    }
  }
  .ipContainer:hover{
    border-color: #409efe;
  }
</style>
